<!DOCTYPE html>
<html>
  <head>
    <title>Flot</title>
    <link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Source+Code+Pro" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai.min.css">
    <link rel="stylesheet" href="demo.css">
  </head>

  <body>

    <div id="header">
      <h1 id="title">jQuery-CSV + Flot</h1>
      <div id="link"><a href="https://github.com/typeiii/jquery-csv">GitHub</a></div>
    </div>
    <div id="container">
      <section id="content">
        <h2>Description</h2>
        <p>Flot is a popular library used to generate graphs in Javascript.</p>
        <p>This Demo generates a basic Flot line graph using CSV as the input data.</p>
        <hr>
        <h2>Load File</h2>
          <select id="file" name="file">
            <option value="data/analytics1.csv">analytics1.csv</option>
            <option value="data/analytics2.csv">analytics2.csv</option>
            <option value="data/sine.csv">sine.csv</option>
            <option value="data/sample2.csv">sample2.csv</option>
          </select>
          <input id="load-file" type="button" value="Load" />
        <hr />
        <h2>Load Data</h2>
        <textarea id="input" style="height: 250px;">0,0.5
0.01,0.5313952597646567
0.02,0.5626666167821521
0.03,0.5936906572928623
0.04,0.6243449435824274
0.05,0.6545084971874737
0.060000000000000005,0.684062276342339
0.07,0.7128896457825363
0.08,0.7408768370508576
0.09,0.7679133974894983
0.09999999999999999,0.7938926261462365
0.10999999999999999,0.8187119948743449
0.11999999999999998,0.8422735529643443
0.12999999999999998,0.8644843137107057
0.13999999999999999,0.8852566213878945
0.15,0.9045084971874736
0.16,0.9221639627510074
0.17,0.9381533400219317
0.18000000000000002,0.9524135262330098
0.19000000000000003,0.9648882429441257
0.20000000000000004,0.9755282581475768
0.21000000000000005,0.9842915805643155
0.22000000000000006,0.9911436253643444
0.23000000000000007,0.996057350657239
0.24000000000000007,0.9990133642141358
0.25000000000000006,1
0.26000000000000006,0.9990133642141358
0.2700000000000001,0.9960573506572389
0.2800000000000001,0.9911436253643442
0.2900000000000001,0.9842915805643154
0.3000000000000001,0.9755282581475766
0.3100000000000001,0.9648882429441255
0.3200000000000001,0.9524135262330096
0.3300000000000001,0.9381533400219315
0.34000000000000014,0.9221639627510072
0.35000000000000014,0.9045084971874733
0.36000000000000015,0.8852566213878942
0.37000000000000016,0.8644843137107052
0.38000000000000017,0.8422735529643438
0.3900000000000002,0.8187119948743442
0.4000000000000002,0.7938926261462359
0.4100000000000002,0.7679133974894976
0.4200000000000002,0.7408768370508568
0.4300000000000002,0.7128896457825354
0.4400000000000002,0.6840622763423381
0.45000000000000023,0.6545084971874727
0.46000000000000024,0.6243449435824263
0.47000000000000025,0.5936906572928612
0.48000000000000026,0.5626666167821509
0.49000000000000027,0.5313952597646555
0.5000000000000002,0.4999999999999987
0.5100000000000002,0.468604740235342
0.5200000000000002,0.43733338321784654
0.5300000000000002,0.4063093427071363
0.5400000000000003,0.3756550564175712
0.5500000000000003,0.3454915028125249
0.5600000000000003,0.3159377236576596
0.5700000000000003,0.2871103542174622
0.5800000000000003,0.25912316294914095
0.5900000000000003,0.23208660251050028
0.6000000000000003,0.20610737385376204
0.6100000000000003,0.1812880051256538
0.6200000000000003,0.15772644703565436
0.6300000000000003,0.135515686289293
0.6400000000000003,0.11474337861210421
0.6500000000000004,0.09549150281252528
0.6600000000000004,0.07783603724899163
0.6700000000000004,0.06184665997806754
0.6800000000000004,0.04758647376698977
0.6900000000000004,0.03511175705587394
0.7000000000000004,0.024471741852422957
0.7100000000000004,0.015708419435684295
0.7200000000000004,0.008856374635655584
0.7300000000000004,0.003942649342761062
0.7400000000000004,0.0009866357858642205
0.7500000000000004,0
0.7600000000000005,0.0009866357858642205
0.7700000000000005,0.0039426493427610065
0.7800000000000005,0.008856374635655528
0.7900000000000005,0.01570841943568424
0.8000000000000005,0.0244717418524229
0.8100000000000005,0.03511175705587388
0.8200000000000005,0.047586473766989656
0.8300000000000005,0.061846659978067486
0.8400000000000005,0.07783603724899157
0.8500000000000005,0.09549150281252516
0.8600000000000005,0.1147433786121041
0.8700000000000006,0.13551568628929272
0.8800000000000006,0.15772644703565392
0.8900000000000006,0.18128800512565313
0.9000000000000006,0.2061073738537612
0.9100000000000006,0.23208660251049917
0.9200000000000006,0.2591231629491396
0.9300000000000006,0.2871103542174607
0.9400000000000006,0.31593772365765777
0.9500000000000006,0.34549150281252283
0.9600000000000006,0.3756550564175689
0.9700000000000006,0.4063093427071337
0.9800000000000006,0.4373333832178437
0.9900000000000007,0.46860474023533893</textarea>
        <input id="load-data" type="button" value="Load" />
        <hr />
        <h2>Plot</h2>
        <div id="flot" style="width:600px;height:300px;margin:0 auto;"></div>
        <h2>Data</h2>
        <textarea id="result" style="height: 250px;"></textarea>
      </section>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>    <script src="../src/jquery.csv.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
    <script src="helpers.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script>
      // enable syntax highlighting
      hljs.initHighlightingOnLoad();

      $('#load-file').bind('click', function () {
        loadFile();
      });

      $('#load-data').bind('click', function() {
        loadData();
      });

      function loadFile() {
        var file = $('#file').val();
        $.get(file, function(csv) {
            var data = $.csv.toArrays(csv, {
              onParseValue: $.csv.hooks.castToScalar
            });
            plot(data);
            $('#result').empty();
            $('#result').html(JSON.stringify(data, null, 2));
        });
      }

      function loadData() {
        var csv = $('#input').val();
        var data = $.csv.toArrays(csv, {
          onParseValue: $.csv.hooks.castToScalar
        });
        plot(data);
        $('#result').empty();
        $('#result').html(JSON.stringify(data, null, 2));
      }

      function plot(data) {
        $.plot($('#flot'), [data], {
          series: {
            lines: { show: true },
            points: { show: true }
          }
        });
      }
    </script>

  </body>
</html>